<template>
	<!-- 发送照片 -->
	<view class="main" @click.stop>
		<view class="input">
			<textarea class="text" type="text" v-model="msg" placeholder="说点什么..." maxlength="100" />
		</view>
		<view class="picker">
			<uni-file-picker
				ref="files"
				v-model="imageValue"
				:limit="9"
				mode="grid"
				file-mediatype="image"
				:auto-upload="false"
				cloudPath="chatImg"
				@success="success"
				@fail="fail"
				:image-styles="imageStyles"
			></uni-file-picker>
		</view>
		<view class="btn_box">
			<view class="btn" @click.stop="sent">
				<text style="font-size: 32rpx; color: white">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
import { sendText, voiceMsg, mediaMsg, videoMsg } from '@/methods/msgSend.js';
import MessageSender from '../../utils/MessageSender';
export default {
	data() {
		return {
			imageValue: [],
			msgSender:null,
			imageStyles: {
				width: 'auto',
				height: 'auto',
				border: {
					color: '#CCC',
					width: 2,
					style: 'dashed',
					radius: '8rpx'
				}
			},
			msg: ''
		};
	},
	computed:{
		storeData(){
			return this.$store.state.msg
		},
		toTarget(){
			return this.$store.state.msg.toTarget
		}
	},
	mounted() {
		if(!this.msgSender){
			this.msgSender=new MessageSender(this.storeData)
		}
		this.$refs.files.choose();
	},
	methods: {


	async	success(e) {
	       try{
			 	const medias = e.tempFiles.map((item) => ({ url: item.url, fileID: item.fileID }));
			const msgs = { content: this.msg, paths: medias };
		   const msg= await this.msgSender.sendMedia(this.toTarget,msgs)
		   console.log("图片获取后的",msg);
			
			//const msg = await mediaMsg(toTarget, msgs, this.storeData);
			//this.$store.commit('msg/SET_publicMessageList', [...this.storeData.publicMessageList, msg]);
			uni.redirectTo({
				url:'/pages/messages/messages',
				success() {
					console.log("跳转完成");
				},
				fail(e) {
					console.error("跳主页失败原因",e);
				}
			});  
		   }catch(err){
			   console.error('发送图片失败',err);
		   }

		
		},
		fail(err) {
			console.warn('fail', err);
		},
		sent() {
			this.$refs.files.upload();
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	background-color: #fff;
	display: flex;
	flex-direction: column;
}
.input {
	height: 100rpx;
	margin: 20rpx 30rpx;

	.text {
		font-size: 30rpx;
	}
}
.picker {
	display: flex;
	padding: 20rpx 30rpx;
	padding-top: 0;
	flex-direction: row;
}
.btn_box {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.btn {
	margin-top: 50rpx;
	margin-left: 0 auto;
	padding: 20rpx 100rpx;
	border-radius: 8rpx;
	background-color: #55aaff;
}
</style>
